import React, { useEffect } from 'react';
import './Modal.css';

const winSound = '/sound/win.mp3';
const loseSound = '/sound/lose.mp3';
const drawSound = '/sound/draw.mp3';

export default function Modal({ show, winner, draw, onRestart }) {
  useEffect(() => {
    if (show) {
      let audio;
      if (draw) audio = new Audio(drawSound);
      else audio = new Audio(winner === 0 ? winSound : loseSound);
      audio.volume = 0.7;
      audio.play();
    }
  }, [show, winner, draw]);

  if (!show) return null;
  return (
    <div className="modal-mask">
      <div className="modal-box">
        <h2>{draw ? '和棋' : '游戏结束'}</h2>
        {draw ? <p>三次循环或无胜负，判和！</p> : <p>胜者：<b className={winner === 0 ? 'p0' : 'p1'}>{winner === 0 ? '① 蓝方' : '② 红方'}</b></p>}
        <button className="btn" onClick={onRestart}>再来一局</button>
      </div>
    </div>
  );
} 